
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: The YUI Global Object: Add Behaviors to Objects with <code>mix</code></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">

<!--there is no custom header content for this example-->

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-debug.js"></script>

</head>
<body id="yahoo-com" class="yui3-skin-sam  yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: The YUI Global Object: Add Behaviors to Objects with <code>mix</code></h1></div>
</div>
<div id="bd">


	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>The YUI Global Object: Add Behaviors to Objects with <code>mix</code></h2>

	<div id="example" class="promo">
	<div class="example-intro">
	<p>Static classes in JavaScript are implemented as object literals
with keys corresponding to public class methods.  As such, static classes
aren't candidates for instantiation or prototype extention.  To add
functionality to static classes, you need to work with the class's object
literal &mdash; and that's what YUI's <code>mix</code> method helps you to do.</p>

<p>Click the button below to call methods <code>mix</code>ed into a static
class, then read the tutorial below for more information about using
<code>mix</code>.</p>
	</div>	

	<div class="module example-container ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam">
                <a href="yui-mix_clean.html" target="_blank">View example in new window.</a>
            </p>
		</div>		<div id="example-canvas" class="bd">

		
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
	
	<input type="button" name="demo_btn" id="demo_btn" value="click"/>
<div id="demo_logger"></div>
<script type="text/javascript">
YUI({filter:"debug", logInclude: {example:true}}).use("node", function(Y) {
    // This method is in the core of the library, so we don't have to use() any
    // additional modules to access it.  However, this example requires 'node'.

    var Logging = function () {
        var logger = null;
        
        return {
            initLogger : function (logNode) {
                if (!logger) {
                    logger = Y.one(logNode);
                }
            },

            log : function (message) {
                if (logger) {
                    logger.set('innerHTML', logger.get('innerHTML') + '<p>' + message + '</p>');
                }
            }
        }
    }();

    var PageController = function () {
        var app_const = 12345;

        return {

            getConst : function () { 
                return app_const;
            },

            logConst : function () {
                this.initLogger('#demo_logger');
                this.log('PageController class constant = ' + this.getConst() +
                          ', logged courtesy of object augmentation via Y.mix.');
            }
        };
    }();

    Y.mix(PageController, Logging);

    Y.on('click', PageController.logConst, '#demo_btn', PageController);
});

</script>
	
	<!--END SOURCE CODE FOR EXAMPLE =============================== -->
	
		
		</div>
	</div>			
	</div>
		
	<h2 class="first">Using <code>mix</code></h2>

<h3>Instantiate YUI</h3>

<div id="syntax-07031d111757252de545d63e1b025e0d" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sy0">&lt;!--</span> include yui <span class="sy0">--&gt;</span></div></li><li class="li1"><div class="de1"><span class="sy0">&lt;</span>script type<span class="sy0">=</span><span class="st0">&quot;text/javascript&quot;</span> src<span class="sy0">=</span><span class="st0">&quot;../../build/yui/yui.js&quot;</span><span class="sy0">&gt;&lt;/</span>script<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;node&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">    <span class="co1">// This method is in the core of the library, so we don't have to use() any</span></div></li><li class="li1"><div class="de1">    <span class="co1">// additional modules to access it.  However, this example requires 'node'.</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="sy0">&lt;!--</span> include yui <span class="sy0">--&gt;</span>
<span class="sy0">&lt;</span>script type<span class="sy0">=</span><span class="st0">&quot;text/javascript&quot;</span> src<span class="sy0">=</span><span class="st0">&quot;../../build/yui/yui.js&quot;</span><span class="sy0">&gt;&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;
YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;node&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="co1">// This method is in the core of the library, so we don't have to use() any</span>
    <span class="co1">// additional modules to access it.  However, this example requires 'node'.</span></pre></div><textarea id="syntax-07031d111757252de545d63e1b025e0d-plain"><!-- include yui -->
<script type="text/javascript" src="../../build/yui/yui.js"></script>

YUI().use("node", function(Y) {
    // This method is in the core of the library, so we don't have to use() any
    // additional modules to access it.  However, this example requires 'node'.</textarea></div>

<h3>Adding functionality to individual objects</h3>
<p>Static classes, such as <code>DOM</code>, are implemented as object literals
with keys corresponding to public class methods.  As such, static classes
aren't candidates for instantiation or prototype extention.  To add
functionality to static classes, you need to work with the class's object
literal.</p>

<p>In this example, <code>mix</code> is used to add a set of behaviors to a static class.</p>

<div id="syntax-da88ad6d5ed060671b976bfdbe2a885f" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> Logging <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> logger <span class="sy0">=</span> <span class="kw2">null</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="kw1">return</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        initLogger <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">&#40;</span>logNode<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            <span class="kw1">if</span> <span class="br0">&#40;</span><span class="sy0">!</span>logger<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                logger <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span>logNode<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">            <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">        log <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">&#40;</span>message<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            <span class="kw1">if</span> <span class="br0">&#40;</span>logger<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                logger.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> logger.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="br0">&#41;</span> <span class="sy0">+</span> <span class="st0">'&lt;p&gt;'</span> <span class="sy0">+</span> message <span class="sy0">+</span> <span class="st0">'&lt;/p&gt;'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">            <span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="kw2">var</span> PageController <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">    <span class="kw2">var</span> app_const <span class="sy0">=</span> <span class="nu0">12345</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="kw1">return</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">        getConst <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span> </div></li><li class="li2"><div class="de2">            <span class="kw1">return</span> app_const<span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">        logConst <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            <span class="kw1">this</span>.<span class="me1">initLogger</span><span class="br0">&#40;</span><span class="st0">'#demo_logger'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">            <span class="kw1">this</span>.<span class="me1">log</span><span class="br0">&#40;</span><span class="st0">'PageController class constant = '</span> <span class="sy0">+</span> <span class="kw1">this</span>.<span class="me1">getConst</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1">                      <span class="st0">', logged courtesy of object augmentation via Y.mix.'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">Y.<span class="me1">mix</span><span class="br0">&#40;</span>PageController<span class="sy0">,</span> Logging<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> PageController.<span class="me1">logConst</span><span class="sy0">,</span> <span class="st0">'#demo_btn'</span><span class="sy0">,</span> PageController<span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> Logging <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw2">var</span> logger <span class="sy0">=</span> <span class="kw2">null</span><span class="sy0">;</span>
&nbsp;
    <span class="kw1">return</span> <span class="br0">&#123;</span>
        initLogger <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">&#40;</span>logNode<span class="br0">&#41;</span> <span class="br0">&#123;</span>
            <span class="kw1">if</span> <span class="br0">&#40;</span><span class="sy0">!</span>logger<span class="br0">&#41;</span> <span class="br0">&#123;</span>
                logger <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span>logNode<span class="br0">&#41;</span><span class="sy0">;</span>
            <span class="br0">&#125;</span>
        <span class="br0">&#125;</span><span class="sy0">,</span>
&nbsp;
        log <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">&#40;</span>message<span class="br0">&#41;</span> <span class="br0">&#123;</span>
            <span class="kw1">if</span> <span class="br0">&#40;</span>logger<span class="br0">&#41;</span> <span class="br0">&#123;</span>
                logger.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> logger.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="br0">&#41;</span> <span class="sy0">+</span> <span class="st0">'&lt;p&gt;'</span> <span class="sy0">+</span> message <span class="sy0">+</span> <span class="st0">'&lt;/p&gt;'</span><span class="br0">&#41;</span><span class="sy0">;</span>
            <span class="br0">&#125;</span>
        <span class="br0">&#125;</span>
    <span class="br0">&#125;</span>
<span class="br0">&#125;</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="kw2">var</span> PageController <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw2">var</span> app_const <span class="sy0">=</span> <span class="nu0">12345</span><span class="sy0">;</span>
&nbsp;
    <span class="kw1">return</span> <span class="br0">&#123;</span>
&nbsp;
        getConst <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span> 
            <span class="kw1">return</span> app_const<span class="sy0">;</span>
        <span class="br0">&#125;</span><span class="sy0">,</span>
&nbsp;
        logConst <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
            <span class="kw1">this</span>.<span class="me1">initLogger</span><span class="br0">&#40;</span><span class="st0">'#demo_logger'</span><span class="br0">&#41;</span><span class="sy0">;</span>
            <span class="kw1">this</span>.<span class="me1">log</span><span class="br0">&#40;</span><span class="st0">'PageController class constant = '</span> <span class="sy0">+</span> <span class="kw1">this</span>.<span class="me1">getConst</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">+</span>
                      <span class="st0">', logged courtesy of object augmentation via Y.mix.'</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="br0">&#125;</span>
    <span class="br0">&#125;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
Y.<span class="me1">mix</span><span class="br0">&#40;</span>PageController<span class="sy0">,</span> Logging<span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> PageController.<span class="me1">logConst</span><span class="sy0">,</span> <span class="st0">'#demo_btn'</span><span class="sy0">,</span> PageController<span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-da88ad6d5ed060671b976bfdbe2a885f-plain">var Logging = function () {
    var logger = null;
    
    return {
        initLogger : function (logNode) {
            if (!logger) {
                logger = Y.one(logNode);
            }
        },

        log : function (message) {
            if (logger) {
                logger.set('innerHTML', logger.get('innerHTML') + '<p>' + message + '</p>');
            }
        }
    }
}();

var PageController = function () {
    var app_const = 12345;

    return {

        getConst : function () { 
            return app_const;
        },

        logConst : function () {
            this.initLogger('#demo_logger');
            this.log('PageController class constant = ' + this.getConst() +
                      ', logged courtesy of object augmentation via Y.mix.');
        }
    };
}();

Y.mix(PageController, Logging);

Y.on('click', PageController.logConst, '#demo_btn', PageController);</textarea></div>
<h3>Much like <code>augment</code></h3>
<p><code>mix</code> works in similar fashion to <code>augment</code>.  In fact, <code>augment</code> uses <code>mix</code> under the hood.  However, rather than adding functionality to class definitions (i.e. function prototypes), <code>mix</code> can work with any object, including object literals and class instances.</p>

<p>See <code>augment</code> and <code>extend</code> for other techniques to help manage your code structure.</p>
				</div>
				<div class="yui-u sidebar">
					
				
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    The YUI Global Object Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li><a href='../yui/yui-core.html'>YUI Core</a></li><li><a href='../yui/yui-more.html'>Load All Modules</a></li><li><a href='../yui/yui-multi.html'>Multiple Instances</a></li><li><a href='../yui/yui-loader-ext.html'>YUI Loader - Dynamically Adding YUI and External Modules</a></li><li><a href='../yui/yui-extend.html'>Create Class Hierarchies with <code>extend</code></a></li><li><a href='../yui/yui-augment.html'>Compose Classes of Objects with <code>augment</code></a></li><li class='selected'><a href='../yui/yui-mix.html'>Add Behaviors to Objects with <code>mix</code></a></li><li><a href='../yui/yui-merge.html'>Combine Data Sets with <code>merge</code></a></li><li><a href='../yui/yui-isa.html'>Check Data Types with <code>Lang</code></a></li><li><a href='../yui/yui-ua.html'>Browser Detection with <code>UA</code></a></li><li><a href='../yui/yui-compat.html'>YUI 2 in 3</a></li><li><a href='../yui/yui-gallery.html'>Natively use YUI Gallery Modules</a></li><li><a href='../yui/yui-gallery2.html'>YUI 2 in 3 &amp; Gallery Modules</a></li>							</ul>
						</div>
					</div>
					
					<div class="mod box4">
                        <div class="hd">
						<h4>More The YUI Global Object Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/yui/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_yui.html">API Documentation</a></li></ul>
                        </div>
					</div>
			  </div>
		</div>
		
		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator/index.html">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="selected "><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Browser History - Functional Examples" href="../../examples/history/index.html">Browser History</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="Internationalization - Functional Examples" href="../../examples/intl/index.html">Internationalization <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Tabview - Functional Examples" href="../../examples/tabview/index.html">Tabview <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2010 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script language="javascript"> 
var yuiConfig = {filter:"debug", logInclude: {example:true}};
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
